<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        .box{
            width: 200px;
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: lightskyblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="hide">隐藏效果</button>
<button id="show">显示效果</button>
<button id="hideAndShow">隐藏然后显示</button>
<br>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="fadeInAndOut">淡入淡出</button>
<br>
<button id="slideUp">收起菜单</button>
<button id="slideDown">弹出菜单</button>

<div class="box" id="menu_class">分类相关</div>
<div class="outter" id="outter">
    <div class="box" id="box1">&nbsp;&nbsp;&nbsp;&nbsp;查看分类</div>
    <div class="box" id="box2">&nbsp;&nbsp;&nbsp;&nbsp;添加分类</div>
    <div class="box" id="box3">&nbsp;&nbsp;&nbsp;&nbsp;删除分类</div>
</div>
<div class="box">用户相关</div>

<script>
$(function () {

    $('#hide').click(function () {
        $('.box').hide(50,function () {
         //   alert("隐藏完了")
        })
    });

    $('#show').dblclick(function () {
        $('.box').show(3000,function () {
            alert('显示出来')
        })
    });

    $('#hideAndShow').click(function () {
        // 如果隐藏,就显示
        // 如果显示, 就隐藏
        $('.box').toggle(1000)
    })

    /*------------*/
    $('#fadeIn').click(function () {
        $('#box1').fadeIn('fast');
        $('#box2').fadeIn('slow');
        $('#box3').fadeIn(3000);
    })

    $('#fadeOut').click(function () {
        $('#box3').fadeOut('fast');
        $('#box2').fadeOut('slow');
        $('#box1').fadeOut(3000);
    })

    $('#fadeInAndOut').click(function () {
        $('#box1').fadeToggle('fast');
        $('#box2').fadeToggle('slow');
        $('#box3').fadeToggle(3000);
    })

    $('#slideUp').click(function () {
        $('#box1').slideUp('1000');
        $('#box2').slideUp('500');
        $('#box3').slideUp('100');
    })

    $('#slideDown').click(function () {
        $('#box1').slideDown('100');
        $('#box2').slideDown('500');
        $('#box3').slideDown('1000');
    })

    $('#menu_class').click(function () {
        $('#outter').slideToggle(250)
    })

})
</script>
</body>
</html>